<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css">
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="//echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jqResize.js"></script>
    <script type="text/javascript" src="js/laydate/laydate.js"></script>
    <style>
        html, body {
            background-color: #F0F0F0;
            font-family: "微软雅黑", Arial, Helvetica, sans-serif;
        }

        .con {
            margin-bottom: 30px;
        }

        .title {
            padding: 15px;
            background-color: #ffffff;
            border-radius: 5px;
            font-size: 1.125rem;
        }

        .chart_pie,
        .chart_bar,
        .chart_map {
            margin-top: 15px;
            background-color: #ffffff;
            border-radius: 5px;
            padding: 15px;
            position: relative;
        }

        .chart_pie {
            height: 290px;
        }

        .chart_bar,
        .chart_map {
            height: 375px;
        }

        .dateLayer {
            border: 0;
            outline: none;
            padding: 0 15px;
            width: 68px;
            font-size: 15px;
            cursor: pointer;
            position: relative;
            display: inline-block;
        }

        .dateLayer:after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            right: 0;
            top: 35%;
            /*top: 8px;*/
            border: 5px solid;
            border-color: #000 transparent transparent transparent;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-6">
            <div class="title">设备地域分布</div>
            <div id="Chart_map" class="con chart_map"></div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6">
            <div class="title">
                年度告警分析
                <div id="year" class="dateLayer" title="选择年份"></div>
            </div>
            <div id="Chart_bar" class="con chart_bar"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="title">设备使用情况</div>
        </div>
    </div>
    <div class="row con">
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div id="Chart_1" class="chart_pie"></div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div id="Chart_2" class="chart_pie"></div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div id="Chart_3" class="chart_pie"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="title">累计告警统计</div>
        </div>
    </div>
    <div class="row con">
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div id="Chart_21" class="chart_pie"></div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div id="Chart_22" class="chart_pie"></div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
            <div id="Chart_23" class="chart_pie"></div>
        </div>
    </div>
</div>
<script type="text/javascript">

    $(function () {

        //年份切换
        laydate.render({
            elem: '#year',
            lang: 'cn', //cn（中文版）、en（国际版，即英文版）
            type: 'year',
            theme: 'default', //default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
            showBottom: true, //是否显示底部按钮
            btns: ['now', 'confirm'], //clear、now、confirm 右下角显示的按钮，按照数组顺序排列
            value: new Date().getFullYear(),
            // change: function (value, date, endDate) { //切换选择的回调：值:2017-08-18，日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}，结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上
            //     console.log(value);
            // },
            done: function (value, date, endDate) { //选择完成的回调：值:2017-08-18，日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}，结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上
                // todo something 重绘年度告警分析柱状图
                console.log('年份：' + value);

                //取随机数字，模拟重绘柱状图表，实际需要根据年份通过ajax去获取数据
                var dataRandom = [
                    {value: Math.ceil(Math.random() * 100), name: '1月'},
                    {value: Math.ceil(Math.random() * 100), name: '2月'},
                    {value: Math.ceil(Math.random() * 100), name: '3月'},
                    {value: Math.ceil(Math.random() * 100), name: '4月'},
                    {value: Math.ceil(Math.random() * 100), name: '5月'},
                    {value: Math.ceil(Math.random() * 100), name: '6月'},
                    {value: Math.ceil(Math.random() * 100), name: '7月'},
                    {value: Math.ceil(Math.random() * 100), name: '8月'},
                    {value: Math.ceil(Math.random() * 100), name: '9月'},
                    {value: Math.ceil(Math.random() * 100), name: '10月'},
                    {value: Math.ceil(Math.random() * 100), name: '11月'},
                    {value: Math.ceil(Math.random() * 100), name: '12月'}
                ];
                drawChart_bar_year(dataRandom);

            }
        });

        //模拟数据
        var data1 = [
            {value: 555, name: '厂家A'},
            {value: 469, name: '厂家B'},
            {value: 234, name: '厂家C'},
            {value: 135, name: '厂家D'}
        ];
        drawChart_pie(document.getElementById("Chart_1"), '设备使用情况', '按厂家分类', data1);

        //模拟数据
        var data2 = [
            {value: 335, name: '苏州'},
            {value: 410, name: '南京'},
            {value: 234, name: '成都'},
            {value: 156, name: '杭州'},
            {value: 249, name: '武汉'},
            {value: 8, name: '芜湖'},
            {value: 1, name: '其它'}
        ];
        drawChart_pie(document.getElementById("Chart_2"), '设备使用情况', '按地域分类', data2);

        //模拟数据
        var data3 = [
            {value: 531, name: 'A项目'},
            {value: 0, name: 'B项目'},
            {value: 234, name: 'C项目'},
            {value: 235, name: 'D项目'},
            {value: 258, name: 'E项目'},
            {value: 135, name: 'F项目'}
        ];
        drawChart_pie(document.getElementById("Chart_3"), '设备使用情况', '按项目分类', data3);

        //模拟数据
        var data21 = [
            {value: 155, name: '厂家A'},
            {value: 309, name: '厂家B'},
            {value: 115, name: '厂家C'},
            {value: 225, name: '厂家D'}
        ];
        drawChart_pie(document.getElementById("Chart_21"), '累计告警统计', '按厂家分类', data21);

        //模拟数据
        var data22 = [
            {value: 135, name: '苏州'},
            {value: 262, name: '南京'},
            {value: 134, name: '成都'},
            {value: 163, name: '杭州'},
            {value: 102, name: '武汉'},
            {value: 8, name: '芜湖'},
            {value: 0, name: '其它'}
        ];
        drawChart_pie(document.getElementById("Chart_22"), '累计告警统计', '按地域分类', data22);

        //模拟数据
        var data23 = [
            {value: 170, name: 'A项目'},
            {value: 131, name: 'B项目'},
            {value: 200, name: 'C项目'},
            {value: 130, name: 'D项目'},
            {value: 58, name: 'E项目'},
            {value: 115, name: 'F项目'}
        ];
        drawChart_pie(document.getElementById("Chart_23"), '累计告警统计', '按项目分类', data23);

        //模拟数据
        var dataBar = [
            {value: 5, name: '1月'},
            {value: 131, name: '2月'},
            {value: 22, name: '3月'},
            {value: 130, name: '4月'},
            {value: 58, name: '5月'},
            {value: 25, name: '6月'},
            {value: 10, name: '7月'},
            {value: 67, name: '8月'},
            {value: 133, name: '9月'},
            {value: 22, name: '10月'},
            {value: 17, name: '11月'},
            {value: 0, name: '12月'}
        ];
        drawChart_bar_year(dataBar);

        //模拟数据 城市参数：name: string 城市名称；value: array [经度，纬度，数值]
        var dataMap = [
            {
                "name": "海门",
                "value": [
                    121.15,
                    31.89,
                    9
                ]
            },
            {
                "name": "鄂尔多斯",
                "value": [
                    109.781327,
                    39.608266,
                    12
                ]
            },
            {
                "name": "招远",
                "value": [
                    120.38,
                    37.35,
                    12
                ]
            },
            {
                "name": "舟山",
                "value": [
                    122.207216,
                    29.985295,
                    12
                ]
            },
            {
                "name": "齐齐哈尔",
                "value": [
                    123.97,
                    47.33,
                    14
                ]
            },
            {
                "name": "盐城",
                "value": [
                    120.13,
                    33.38,
                    15
                ]
            },
            {
                "name": "赤峰",
                "value": [
                    118.87,
                    42.28,
                    16
                ]
            },
            {
                "name": "青岛",
                "value": [
                    120.33,
                    36.07,
                    18
                ]
            },
            {
                "name": "乳山",
                "value": [
                    121.52,
                    36.89,
                    18
                ]
            },
            {
                "name": "金昌",
                "value": [
                    102.188043,
                    38.520089,
                    19
                ]
            },
            {
                "name": "泉州",
                "value": [
                    118.58,
                    24.93,
                    21
                ]
            },
            {
                "name": "南通",
                "value": [
                    121.05,
                    32.08,
                    23
                ]
            },
            {
                "name": "拉萨",
                "value": [
                    91.11,
                    29.97,
                    24
                ]
            },
            {
                "name": "云浮",
                "value": [
                    112.02,
                    22.93,
                    24
                ]
            },
            {
                "name": "上海",
                "value": [
                    121.48,
                    31.22,
                    25
                ]
            },
            {
                "name": "攀枝花",
                "value": [
                    101.718637,
                    26.582347,
                    25
                ]
            },
            {
                "name": "承德",
                "value": [
                    117.93,
                    40.97,
                    25
                ]
            },
            {
                "name": "汕尾",
                "value": [
                    115.375279,
                    22.786211,
                    26
                ]
            },
            {
                "name": "丹东",
                "value": [
                    124.37,
                    40.13,
                    27
                ]
            },
            {
                "name": "瓦房店",
                "value": [
                    121.979603,
                    39.627114,
                    30
                ]
            },
            {
                "name": "延安",
                "value": [
                    109.47,
                    36.6,
                    38
                ]
            },
            {
                "name": "咸阳",
                "value": [
                    108.72,
                    34.36,
                    43
                ]
            },
            {
                "name": "南昌",
                "value": [
                    115.89,
                    28.68,
                    54
                ]
            },
            {
                "name": "柳州",
                "value": [
                    109.4,
                    24.33,
                    54
                ]
            },
            {
                "name": "三亚",
                "value": [
                    109.511909,
                    18.252847,
                    54
                ]
            },
            {
                "name": "泸州",
                "value": [
                    105.39,
                    28.91,
                    57
                ]
            },
            {
                "name": "克拉玛依",
                "value": [
                    84.77,
                    45.59,
                    72
                ]
            }
        ];
        drawChart_map(document.getElementById("Chart_map"), dataMap);

    });

    /**
     * 绘制环形图
     * @param dom 绘制的dom对象
     * @param name string 数值名称
     * @param str string 小标题
     * @param data json数组 数据 [{value:number,name:string},...]
     */
    function drawChart_pie(dom, name, str, data) {
        var legenData = [], legendSelected = {};
        $.each(data, function (index, item) {
            legenData.push(item.name);
            legendSelected[item.name] = (item.value != 0);
        });
        var total = 0;
        $.each(data, function (index, item) {
            total += item.value;
        });
        var myChart = echarts.init(dom);
        $(dom).resize(function () { //容器大小变化时，表重新自适应 ，$("selector").resize()依赖jquery和jqResize.js
            myChart.resize();
        });

        function getTextTotal(num) {
            return '总计(' + num + ')';
        }

        var option = {
            title: {
                text: getTextTotal(total),
                subtext: str,
                x: 'center',
                y: '48%'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'horizontal',
                left: 'left',
                top: 'top',
                data: legenData,
                selected: legendSelected
            },
            series: [
                {
                    name: name,
                    type: 'pie',
                    radius: ['45%', '62%'],
                    center: ['50%', '55%'],
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}({c})'
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0,0,0,0.5)'
                        }
                    },
                    // color: ['#37A2DA', '#2FBBDD', '#67DFE2', '#96D9AE', '#71F6F9', '#EB9275', '#F16D8D', '#E062AE', '#E690D1', '#E7BCF3', '#9D96F5', '#8378EA', '#96BFFF'],
                    data: data
                }
            ]
        };
        myChart.setOption(option, true);
        myChart.on("legendselectchanged", function (obj) { //切换图例开关时，计算显示的图例的总数
            var selectedTotal = 0;
            legendSelected = obj.selected;
            $.each(data, function (index, item) {
                if (legendSelected[item.name]) {
                    selectedTotal += item.value;
                }
            });
            option.title.text = getTextTotal(selectedTotal);
            option.legend.selected = legendSelected;
            myChart.setOption(option);
        });
    }

    /**
     * 绘柱状图
     * @param dom 绘制的dom对象
     * @param name string 数值名称
     * @param str string 小标题
     * @param data json数组 数据 [{value:number,name:string},...]
     */
    function drawChart_bar(dom, name, str, data) {
        var dataName = [], dataValue = [];
        $.each(data, function (index, item) {
            dataName.push(item.name);
        });
        $.each(data, function (index, item) {
            dataValue.push(item.value);
        });
        var total = 0;
        $.each(data, function (index, item) {
            total += item.value;
        });
        var myChart = echarts.init(dom);
        $(dom).resize(function () { //容器大小变化时，表重新自适应 ，$("selector").resize()依赖jquery和jqResize.js
            myChart.resize();
        });
        var option = {
            title: {
                // text: '年度告警分析',
                subtext: str + '（总计 ' + total + '）'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#283b56'
                    }
                }
            },
            grid: {
                left: 0,
                right: 0,
                // top: '20px',
                bottom: '10px',
                containLabel: true
            },
            xAxis: {
                data: dataName,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            // dataZoom: [ //缩放
            //     {
            //         type: 'inside'
            //     }
            // ],
            series: [
                {
                    type: 'bar',
                    // barWidth : 30,//柱图宽度
                    barMaxWidth: 50,//最大宽度
                    name: name,
                    label: {
                        normal: {
                            show: true,
                            align: 'center',
                            position: 'top',
                            color: '#888'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    data: dataValue
                }
            ]
        };

        // var zoomSize = 6;
        // myChart.on('click', function (params) {  //点击缩放
        //     myChart.dispatchAction({
        //         type: 'dataZoom',
        //         startValue: dataName[Math.max(params.dataIndex - zoomSize / 2, 0)],
        //         endValue: dataName[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        //     });
        // });

        myChart.setOption(option, true);
    }

    //绘制年度分析柱状图
    function drawChart_bar_year(data) {
        drawChart_bar(document.getElementById("Chart_bar"), '告警统计', '年度告警分析', data);
    }


    //绘制地图+散点
    function drawChart_map(dom, data) {
        var myChart = echarts.init(dom);
        $(dom).resize(function () { //容器大小变化时，表重新自适应 ，$("selector").resize()依赖jquery和jqResize.js
            myChart.resize();
        });

        //部分城市坐标参考
        var geoCoordMap = {
            '海门': [121.15, 31.89],
            '鄂尔多斯': [109.781327, 39.608266],
            '招远': [120.38, 37.35],
            '舟山': [122.207216, 29.985295],
            '齐齐哈尔': [123.97, 47.33],
            '盐城': [120.13, 33.38],
            '赤峰': [118.87, 42.28],
            '青岛': [120.33, 36.07],
            '乳山': [121.52, 36.89],
            '金昌': [102.188043, 38.520089],
            '泉州': [118.58, 24.93],
            '莱西': [120.53, 36.86],
            '日照': [119.46, 35.42],
            '胶南': [119.97, 35.88],
            '南通': [121.05, 32.08],
            '拉萨': [91.11, 29.97],
            '云浮': [112.02, 22.93],
            '梅州': [116.1, 24.55],
            '文登': [122.05, 37.2],
            '上海': [121.48, 31.22],
            '攀枝花': [101.718637, 26.582347],
            '威海': [122.1, 37.5],
            '承德': [117.93, 40.97],
            '厦门': [118.1, 24.46],
            '汕尾': [115.375279, 22.786211],
            '潮州': [116.63, 23.68],
            '丹东': [124.37, 40.13],
            '太仓': [121.1, 31.45],
            '曲靖': [103.79, 25.51],
            '烟台': [121.39, 37.52],
            '福州': [119.3, 26.08],
            '瓦房店': [121.979603, 39.627114],
            '即墨': [120.45, 36.38],
            '抚顺': [123.97, 41.97],
            '玉溪': [102.52, 24.35],
            '张家口': [114.87, 40.82],
            '阳泉': [113.57, 37.85],
            '莱州': [119.942327, 37.177017],
            '湖州': [120.1, 30.86],
            '汕头': [116.69, 23.39],
            '昆山': [120.95, 31.39],
            '宁波': [121.56, 29.86],
            '湛江': [110.359377, 21.270708],
            '揭阳': [116.35, 23.55],
            '荣成': [122.41, 37.16],
            '连云港': [119.16, 34.59],
            '葫芦岛': [120.836932, 40.711052],
            '常熟': [120.74, 31.64],
            '东莞': [113.75, 23.04],
            '河源': [114.68, 23.73],
            '淮安': [119.15, 33.5],
            '泰州': [119.9, 32.49],
            '南宁': [108.33, 22.84],
            '营口': [122.18, 40.65],
            '惠州': [114.4, 23.09],
            '江阴': [120.26, 31.91],
            '蓬莱': [120.75, 37.8],
            '韶关': [113.62, 24.84],
            '嘉峪关': [98.289152, 39.77313],
            '广州': [113.23, 23.16],
            '延安': [109.47, 36.6],
            '太原': [112.53, 37.87],
            '清远': [113.01, 23.7],
            '中山': [113.38, 22.52],
            '昆明': [102.73, 25.04],
            '寿光': [118.73, 36.86],
            '盘锦': [122.070714, 41.119997],
            '长治': [113.08, 36.18],
            '深圳': [114.07, 22.62],
            '珠海': [113.52, 22.3],
            '宿迁': [118.3, 33.96],
            '咸阳': [108.72, 34.36],
            '铜川': [109.11, 35.09],
            '平度': [119.97, 36.77],
            '佛山': [113.11, 23.05],
            '海口': [110.35, 20.02],
            '江门': [113.06, 22.61],
            '章丘': [117.53, 36.72],
            '肇庆': [112.44, 23.05],
            '大连': [121.62, 38.92],
            '临汾': [111.5, 36.08],
            '吴江': [120.63, 31.16],
            '石嘴山': [106.39, 39.04],
            '沈阳': [123.38, 41.8],
            '苏州': [120.62, 31.32],
            '茂名': [110.88, 21.68],
            '嘉兴': [120.76, 30.77],
            '长春': [125.35, 43.88],
            '胶州': [120.03336, 36.264622],
            '银川': [106.27, 38.47],
            '张家港': [120.555821, 31.875428],
            '三门峡': [111.19, 34.76],
            '锦州': [121.15, 41.13],
            '南昌': [115.89, 28.68],
            '柳州': [109.4, 24.33],
            '三亚': [109.511909, 18.252847],
            '自贡': [104.778442, 29.33903],
            '吉林': [126.57, 43.87],
            '阳江': [111.95, 21.85],
            '泸州': [105.39, 28.91],
            '西宁': [101.74, 36.56],
            '宜宾': [104.56, 29.77],
            '呼和浩特': [111.65, 40.82],
            '成都': [104.06, 30.67],
            '大同': [113.3, 40.12],
            '镇江': [119.44, 32.2],
            '桂林': [110.28, 25.29],
            '张家界': [110.479191, 29.117096],
            '宜兴': [119.82, 31.36],
            '北海': [109.12, 21.49],
            '西安': [108.95, 34.27],
            '金坛': [119.56, 31.74],
            '东营': [118.49, 37.46],
            '牡丹江': [129.58, 44.6],
            '遵义': [106.9, 27.7],
            '绍兴': [120.58, 30.01],
            '扬州': [119.42, 32.39],
            '常州': [119.95, 31.79],
            '潍坊': [119.1, 36.62],
            '重庆': [106.54, 29.59],
            '台州': [121.420757, 28.656386],
            '南京': [118.78, 32.04],
            '滨州': [118.03, 37.36],
            '贵阳': [106.71, 26.57],
            '无锡': [120.29, 31.59],
            '本溪': [123.73, 41.3],
            '克拉玛依': [84.77, 45.59],
            '渭南': [109.5, 34.52],
            '马鞍山': [118.48, 31.56],
            '宝鸡': [107.15, 34.38],
            '焦作': [113.21, 35.24],
            '句容': [119.16, 31.95],
            '北京': [116.46, 39.92],
            '徐州': [117.2, 34.26],
            '衡水': [115.72, 37.72],
            '包头': [110, 40.58],
            '绵阳': [104.73, 31.48],
            '乌鲁木齐': [87.68, 43.77],
            '枣庄': [117.57, 34.86],
            '杭州': [120.19, 30.26],
            '淄博': [118.05, 36.78],
            '鞍山': [122.85, 41.12],
            '溧阳': [119.48, 31.43],
            '库尔勒': [86.06, 41.68],
            '安阳': [114.35, 36.1],
            '开封': [114.35, 34.79],
            '济南': [117, 36.65],
            '德阳': [104.37, 31.13],
            '温州': [120.65, 28.01],
            '九江': [115.97, 29.71],
            '邯郸': [114.47, 36.6],
            '临安': [119.72, 30.23],
            '兰州': [103.73, 36.03],
            '沧州': [116.83, 38.33],
            '临沂': [118.35, 35.05],
            '南充': [106.110698, 30.837793],
            '天津': [117.2, 39.13],
            '富阳': [119.95, 30.07],
            '泰安': [117.13, 36.18],
            '诸暨': [120.23, 29.71],
            '郑州': [113.65, 34.76],
            '哈尔滨': [126.63, 45.75],
            '聊城': [115.97, 36.45],
            '芜湖': [118.38, 31.33],
            '唐山': [118.02, 39.63],
            '平顶山': [113.29, 33.75],
            '邢台': [114.48, 37.05],
            '德州': [116.29, 37.45],
            '济宁': [116.59, 35.38],
            '荆州': [112.239741, 30.335165],
            '宜昌': [111.3, 30.7],
            '义乌': [120.06, 29.32],
            '丽水': [119.92, 28.45],
            '洛阳': [112.44, 34.7],
            '秦皇岛': [119.57, 39.95],
            '株洲': [113.16, 27.83],
            '石家庄': [114.48, 38.03],
            '莱芜': [117.67, 36.19],
            '常德': [111.69, 29.05],
            '保定': [115.48, 38.85],
            '湘潭': [112.91, 27.87],
            '金华': [119.64, 29.12],
            '岳阳': [113.09, 29.37],
            '长沙': [113, 28.21],
            '衢州': [118.88, 28.97],
            '廊坊': [116.7, 39.53],
            '菏泽': [115.480656, 35.23375],
            '合肥': [117.27, 31.86],
            '武汉': [114.31, 30.52],
            '大庆': [125.03, 46.58]
        };

        var option = {
            tooltip: {
                trigger: 'item',
                formatter: function (item) {
                    var name = item.data.name, value = item.data.value[2];
                    return name + '：' + value;
                }
            },
            geo: {
                map: 'china',
                roam: true,
                label: {
                    normal: {
                        show: true, //是否显示省份名称
                        textStyle: {
                            color: 'rgba(0,0,0,0.4)'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis: {
                        areaColor: null,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series: [
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: data,
                    symbolSize: 10,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false //是否显示城市名称
                        },
                        emphasis: {
                            show: true //鼠标经过点时，是否显示城市名称
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F06C00'
                        }
                    }
                }
            ]
        };

        myChart.setOption(option, true);
    }

</script>
</body>
</html>